<template>
	<el-table-column v-bind="$attrs" min-width="120" show-overflow-tooltip>
    <template #default="{ row }">
      <template v-if="!isEdit">
        {{ row[prop] }}
      </template>
      <template v-else>
        <el-button style=" float: left; position: absolute; z-index: 10; width: 10px" text @click="clickon"
        v-if="selectId && loginInfo.userId == 1300000000101"></el-button>
        <el-select-v2 v-model="row[prop]" :options="items" :disabled="!isEdit" clearable />
      </template>
    </template>
  </el-table-column>
  <el-dialog v-if="selectId && loginInfo.userId == 1300000000101" v-model="showConfigDailog" width="600px" draggable
    :title="'选项配置: ' + selectId" appendToBody>
    <MkEditableTable :data="tableData" @add="addItem" @delete="deleteItem">
      <el-table-column label="选项">
        <template #default="{ row }">
          <el-input v-model="row.label"></el-input>
        </template>
      </el-table-column>
    </MkEditableTable>
    <template #footer>
      <slot name="footer">
        <el-button @click="reset"> 恢复默认选项 </el-button>
        <el-button @click="showConfigDailog = false"> 取 消</el-button>
        <el-button @click="submitConfig" type="primary"> 保 存</el-button>
      </slot>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
// 可以自定义选项的select组件, 用于表格内的select框, 例如:
// <MkColumnInputSelect :options="['当日订血', '紧急订血', '预定用血']" selectId="yueXue_dingXueLeiXing" prop="dingXueLeiXing" :isEdit="ctx.isEdit" />
// 需要是超级管理员账号才能修改自定义选项
import { getFormConfig, saveFormConfig, loginInfo } from '/@/stores/baseInfo/';
import { BasFormConfigOutput } from '/@/api/bas/BasFormConfig';
import MkEditableTable from '/@/componentsMaike/tables/MkEditableTable.vue';
// 正常的列, 主要是为了统一默认列宽120
defineOptions({
	name: 'MkTableInputSelect',
});
export interface SelectItem {
  value: string;
  label: string;
}

export interface TableItem {
  label: string;
}

const props = defineProps({
  prop: {
    type: String,
    default: ''
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  selectId: { // 选择框的id, 用于缓存选项
    type: String,
  },
  options: { // 选项
    type: Array<string>,
  },
})

const showConfigDailog = ref(false);
const items = ref([] as SelectItem[]);
const tableData = ref([] as TableItem[]);
const clickon = () => { console.log(123);
 showConfigDailog.value = true; } // 点击按钮, 显示配置dialog
// 构造ruleConfig
onMounted(async () => {
  // props.options 是字符串数组,tableData 是对象数组: { label: item } , 所以先做个转换
  if (props.selectId) {
    let ruleConfigInStore = await getFormConfig("select", props.selectId); // 获取表单必填配置
    if (ruleConfigInStore.config && ruleConfigInStore.config.items) {
      tableData.value = ruleConfigInStore.config.items; // 保存在服务器的items是对象数组: { label: item }
    } else if (props.options) {
      tableData.value = props.options.map((item: any) => { return { label: item } });
    }
  } else if (props.options) {
    tableData.value = props.options.map((item: any) => { return { label: item } });
  }

  items.value = tableData.value.map((item: any) => {
    return {
      label: item.label,
      value: item.label,
    }
  })
});

// 添加选项
const addItem = () => {
  let item = { label: "" } as TableItem;
  tableData.value.push(item);
}

// 删除选项
const deleteItem = (row: any) => {
  tableData.value = tableData.value.filter((item) => item != row);
}

// 恢复默认值
const reset = () => {
  if (props.options) {
    tableData.value = props.options.map((item: any) => { return { label: item } });
    items.value = tableData.value.map((item: any) => {
      return {
        label: item.label,
        value: item.label,
      }
    })
  } else {
    tableData.value = [];
    items.value = [];
  }
}

// 保存
const submitConfig = async () => {
  let input = { id: props.selectId, tag: 'select', config: { items: tableData.value } };
  await saveFormConfig(input as BasFormConfigOutput);
  showConfigDailog.value = false;

  // 刷新选项
  items.value = tableData.value.map((item: any) => {
    return {
      label: item.label,
      value: item.label,
    }
  })
}
</script>
